<script setup lang="ts">
defineProps<{
  tagItem: TagItem;
}>();
</script>

<template>
  <div class="tagItemImg relative h-0 pb-full w-full">
    <img :src="`https://img.xxsoftware.top/svg/${tagItem.name}.svg`" mode="widthFix" />
  </div>
  <div>{{ tagItem.value }}</div>
</template>

<style>
.tagItemImg::before {
  position: absolute;
  content: '';
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  z-index: 2;
  height: 85%;
  background-color: #999;
  border-radius: 50%;
}
.selected .tagItemImg::before {
  background-color: var(--nut-primary-color, #fa2c19);
}
.tagItemImg img {
  z-index: 3;
  position: inherit;
  width: 60%;
  height: 60%;
  left: 50%;
  transform: translate(-50%, 30%);
}
</style>
